<template>
  <!-- 编辑服务 -->
  <view class="edit-serve-popup">
    <view class="title">添加商品</view>

    <view class="form-box">
      <view class="item flex flex-ai-c flex-jc-sb">
        <text class="color-666">服务名</text>
        <input
          type="text"
          v-model="formData.serviceName"
          placeholder="请输入服务名"
        />
      </view>

      <view class="item flex flex-ai-c flex-jc-sb">
        <text class="color-666">销售价</text>
        <input
          type="number"
          v-model="formData.servicePrice"
          placeholder="请输入销售价"
        />
        <text>元</text>
      </view>

      <view class="item flex flex-ai-c flex-jc-sb">
        <text class="color-666">数量</text>
        <view class="num-box flex flex-ai-c">
          <text class="btn" @click="less()">-</text>
          <input type="number" v-model="formData.serviceCount" class="cont" />
          <text class="btn" @click="add()">+</text>
        </view>
      </view>
    </view>

    <!-- 按钮 -->
    <view class="btn-box flex">
      <view class="btn" @click="confirm()">
        <i-button
          text="取消"
          bg-color="#333"
          color="#FFE23E"
          shape="circleLeft"
        ></i-button>
      </view>
      <view class="btn" @click="confirm(true)">
        <i-button text="确定" color="#333" shape="circleRight"></i-button>
      </view>
    </view>
  </view>
</template>

<script>
import iButton from '@/components/carGoods/i-button.vue'

export default {
  name: 'addGoodsPopup',
  components: { iButton },
  data() {
    return {
      formData: {
        name: '',
        entryPrice: '',
        markup: '',
        price: '',
        serviceCount: 1,
      },
    }
  },

  methods: {
    // 减
    less() {
      if (this.formData.amount === 1) return
      this.formData.serviceCount -= 1
    },

    // 加
    add() {
      this.formData.serviceCount += 1
    },

    // 确定
    confirm(type) {
      this.$emit('change', {
        type,
        data: this.formData,
      })
    },

    // 跳转选择商品页
    goSelectGoods() {
      uni.navigateTo({
        url: '/pages_afterSales/selectOrderType/selectOrderType',
      })
    },

    // 父组件调用，填充页面数据
    loadData(data) {
      this.formData = data
    },
  },
}
</script>

<style lang="scss" scoped>
.edit-serve-popup {
  .title {
    padding: 33rpx 0;
    font-size: 32rpx;
    color: #333;
    text-align: center;
  }
}

// 表单
.form-box {
  padding: 0 24rpx;

  .item {
    padding: 33rpx 0;
    border-bottom: 1px solid #eee;

    > input {
      flex: 1;
      padding: 0 80rpx;
      font-size: 28rpx;
    }

    // 计数器
    .num-box {
      .btn {
        width: 48rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 48rpx;
        color: #999;
      }
      .cont {
        width: 48rpx;
        height: 48rpx;
        margin: 0 16rpx;
        background-color: #eeeeee;
        border-radius: 10rpx;
        text-align: center;
      }
    }
  }
}

// 底部按钮
.btn-box {
  padding: 24rpx;

  .btn {
    width: 50%;

    .i-button {
      width: 100%;
    }
  }
}
</style>
